<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<title>Certification DApp</title>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<link href="css/app.css" rel="stylesheet">
	<link href="css/fontawesome.css" rel="stylesheet"> <!--load all fontawesome styles -->

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body>
<div class="row appPage">
	<div class="col-md-7 appSection">
		<div class="row">
			<div class="col-md-12">
				<ol class="breadcrumb" style="margin-top: 25px;">
					<li class="breadcrumb-item">Hyperledger</li>
					<li class="breadcrumb-item">Fabric</li>
					<li class="breadcrumb-item">Chaincode Development</li>
					<li class="breadcrumb-item active">Application</li>
				</ol>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="jumbotron jumbotron-fluid">
			<div class="container">
				<h1 class="display-4">Certification Network</h1>
				<p class="lead">A simple certification application that allows member organizations to issue, verify and view certificates using Hyperledger Fabric Blockchain</p>
			</div>
		</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="form-group loginBox">
					<label for="certificatePath">Certificate:</label>
					<input type="text" class="form-control" id="certificatePath" placeholder="Provide path of certificate to use for this user">
					<br>
					<label for="privateKeyPath">Private Key:</label>
					<input type="text" class="form-control" id="privateKeyPath" placeholder="Provide path of private key to use for this user">
					<br>
					<button type="button" class="btn btn-success" id="addToWallet" onclick="addToWallet()">
						Login
					</button>
					<br> <br>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 loginStatus">

			</div>
		</div>
		<div class="row newStudentBox" style="display: none;">
			<div class="col-md-12">
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">New Student Account</h5>
						<hr>
						<div class="form-group">
							<label for="studentId">Student ID:</label>
							<input type="text" class="form-control" id="studentId" placeholder="Provide a unique student ID">
							<br>
							<label for="studentName">Student Name:</label>
							<input type="text" class="form-control" id="studentName" placeholder="Student First Name and Last Name">
							<br>
							<label for="studentEmail">Student Email:</label>
							<input type="text" class="form-control" id="studentEmail" placeholder="Student Email ID">
							<br>
							<button type="button" class="btn btn-success" id="createStudent" onclick="createStudent()">
								Create Student Account
							</button>
							<div class="spinner-border createStudentSpinner" role="status" style="display: none;">
								<span class="sr-only">Loading...</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-5 resultSection">
		<div class="row">
			<div class="col-md-12">
				<h2>Students</h2>
				<table class="table table-dark studentTable">
					<thead>
						<tr>
							<th>#</th>
							<th>ID</th>
							<th>Name</th>
							<th>Email</th>
							<th>Action</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
		<div class="row certificateTableBox">
			<div class="col-md-12">
				<h2>Certificates</h2>
				<table class="table table-dark certificateTable">
					<thead>
					<tr>
						<th>#</th>
						<th>ID</th>
						<th>Grade</th>
						<th>Hash</th>
						<th>Action</th>
					</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div>
		<div class="toast login-toast" style="position: absolute; top: 20px; right: 20px; min-width: 200px;" data-delay="3000">
			<div class="toast-header">
				<strong class="mr-auto">Status</strong>
				<small>Just Now</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Login Successful!
			</div>
		</div>
		<div class="toast student-toast" style="position: absolute; top: 20px; right: 20px; min-width: 200px;" data-delay="3000">
			<div class="toast-header">
				<strong class="mr-auto">Status</strong>
				<small>Just Now</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Student account created!
			</div>
		</div>
		<div class="toast certificate-toast" style="position: absolute; top: 20px; right: 20px; min-width: 200px;" data-delay="3000">
			<div class="toast-header">
				<strong class="mr-auto">Status</strong>
				<small>Just Now</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Certificate issued to student!
			</div>
		</div>
		<div class="toast verify-toast" style="position: absolute; top: 20px; right: 20px; min-width: 200px;" data-delay="3000">
			<div class="toast-header">
				<strong class="mr-auto">Status</strong>
				<small>Just Now</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Verification result available!
			</div>
		</div>
		<div class="toast error-toast" style="position: absolute; top: 20px; right: 20px; min-width: 200px;" data-delay="3000">
			<div class="toast-header">
				<strong class="mr-auto">Error</strong>
				<small>Just Now</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Error occured!
			</div>
		</div>
	</div>

	<div class="modal resultModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Certificate Verification</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>

</html>
